<template>
	<view class="Box">
		<tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
		<view class="ProductsBox">
			<view class="Products">
				<image :src="tableData.dishesImg" class="positionImg">
				</image>
				<view class="titleBox">
					<view class="title">
						{{ tableData.dishesName }}
					</view>
					<view class="price">
						￥{{ tableData.price }}/{{ tableData.specification }}
					</view>
				</view>
			</view>
		</view>
		<view class="NumberOfTravelers">
			<view class="NumberOfTravelers-text">数量</view>
			<tui-numberbox :value="value" @change="change"></tui-numberbox>
		</view>

		<view class="shopBox">
			<view class="title">
				店铺信息
			</view>
			<view class="shop">
				<image :src="shopData.shopImgList[0]" class="shopImg">
				</image>
				<view class="shopRight">
					<view class="shopName">
						<view class="name">
							{{ shopData.shopName }}
						</view>
						<view v-if="shopData.type == 1" class="shopType">餐饮</view>
						<view v-if="shopData.type == 2" class="shopType">住宿</view>
						<view v-if="shopData.type == 3" class="shopType">零售</view>
						<view v-if="shopData.type == 4" class="shopType">平台</view>
					</view>
					<view class="shopTag">
						<view v-for="(item,index) in shopData.tag" :key="index" class="">
							<view class="tagItem">
								{{ item }}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="NoticeBox">
			<view class="">
				购买须知：
			</view>
			<view class="">
				购买商品后需到店自提或使用，凭订单二维码与门店进行核销后即可兑换商品。
			</view>
		</view>

		<view class="payment">
			<view class="paymentFee">
				<view class="totalPrice">总价 ¥</view>
				<view class="wordSize">{{ tableData.price * value }}</view>
			</view>

			<!-- <view class="detail">明细
      </view>
      <view class="icon">
        <tui-icon name="arrowup"></tui-icon>
      </view> -->
			<view class="payment-1" @click="payClick">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		querySundryInfo,
		queryShopDetails,
		sundryInitialize,
		getSign,
		postOrder
	} from "@/api/challenge";

	export default {
		data() {
			return {
				tableData: {},
				shopData: {},
				value: 1,
				sundryId: '',
				loadingTips: false
			}
		},
		onLoad(data) {
			this.sundryId = data.id
			querySundryInfo(data.id).then(res => {
				console.log('输出商品', res);
				this.tableData = res
				queryShopDetails({
					shopId: res.shopId,
				}).then(params => {
					console.log('输出商铺', params)
					var idynamicTags = []
					params.tag.split(",").forEach((params, index) => {
						if (params != '') {
							idynamicTags.push(params)
						}
					})
					params.tag = idynamicTags
					this.shopData = params
				})
			})
		},
		methods: {
			change: function(e) {
				this.value = e.value
			},
			payClick() {
				var that = this
				that.loadingTips = true

				sundryInitialize({
					sundryId: this.sundryId,
					number: this.value,
					userOpenId: uni.getStorageSync('openId'),
					tel: uni.getStorageSync("userinfo").phone,
					nickName: uni.getStorageSync("userinfo").nickName,
					// 聚力
					appId: "wx5b3843197d34d53b"
				}).then(res => {
					that.loadingTips = false
					getSign({
						prepayId: res.prepayId,
						// // 聚力
						appId: "wx5b3843197d34d53b",
					}).then(params => {
						wx.requestPayment({
							timeStamp: params.data.timeStamp,
							nonceStr: params.data.nonceStr,
							package: params.data.package,
							signType: params.data.signType,
							paySign: params.data.paySign,
							success: function(successres) {
								postOrder({
									orderSn: res.orderNum,
									orderAmount: 1,
									payStatus: 1,
								}).then((completeres) => {
									console.log("查询完成", completeres);
								});
								uni.reLaunch({
									url: '/pages/PopularRoute/payStatus?type=1&lineType=0&orderType=2'
								})
							},
							fail: function(failres) {
								console.log(failres);
								uni.reLaunch({
									url: '/pages/PopularRoute/payStatus?type=2&lineType=0&orderType=2'
								})
							},
							complete: function(completeres) {
								console.log("完成", completeres);
							},
						});
					})

				}).catch(err => {
					that.loadingTips = false
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
		font-family: PingFang SC, PingFang SC-Heavy;
	}

	.ProductsBox {
		padding-top: 32rpx;

		.Products {
			background-color: #fff;
			margin: 0rpx 32rpx 32rpx 32rpx;
			display: flex;
			padding: 20rpx;
			border-radius: 20rpx;

			.positionImg {
				width: 152rpx;
				height: 152rpx;
			}

			.titleBox {
				margin-left: 20rpx;

				.title {
					font-weight: 800;
					color: #212121;
				}

				.price {
					color: #ff0000;
					margin-top: 20rpx;
				}
			}
		}
	}

	.NumberOfTravelers {
		display: flex;
		justify-content: space-between;
		margin: 0 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 20rpx;

		.NumberOfTravelers-text {
			font-weight: 800;
		}
	}

	.shopBox {
		margin: 32rpx;
		padding: 32rpx 0 32rpx 32rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.title {
			font-weight: 800;
		}

		.shop {
			display: flex;
			padding-top: 20rpx;

			.shopImg {
				width: 110rpx;
				height: 110rpx;
				border-radius: 16rpx;
			}

			.shopRight {
				margin-left: 20rpx;

				.shopName {
					display: flex;

					.name {
						font-weight: 800;
					}

					.shopType {
						font-size: 24rpx;
						color: #ff9802;
						border: 2rpx solid #ff9802;
						border-radius: 22rpx;
						padding: 0 14rpx;
						line-height: 38rpx;
						margin-left: 10rpx;
					}
				}

				.shopTag {
					display: flex;
					margin-top: 20rpx;
					overflow: hidden;


					.tagItem {
						font-size: 24rpx;
						padding: 2rpx 8rpx;
						background: #cccccc;
						border-radius: 4px;
						color: #fff;
						margin-right: 12rpx;
						white-space: nowrap;
					}
				}
			}
		}
	}

	.NoticeBox {
		margin: 40rpx;
		font-size: 28rpx;
		color: #757575;
	}

	.payment {
		margin-top: 45rpx;
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #ffff;
		width: 100%;
		position: fixed;
		bottom: 0;

		.paymentFee {
			display: flex;
			align-items: center;

			.totalPrice {
				padding-left: 45rpx;
				color: #FF0000;
			}

			.wordSize {
				color: #FF0000;
				font-size: 45rpx;
				margin-left: 8rpx;
			}
		}

		.payment-1 {
			background-color: #4286F5;
			height: 70rpx;
			border-radius: 40rpx;
			width: 180rpx;
			color: #ffff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 50rpx;
			margin-right: 40rpx;
		}
	}
</style>